<backup-drives-header [type]="type"></backup-drives-header>

<ion-content class="ion-padding with-widgets">
  <!-- loading -->
  <text-spinner
    *ngIf="loading; else loaded"
    [text]="loadingText"
  ></text-spinner>

  <!-- loaded -->
  <ng-template #loaded>
    <!-- error -->
    <ion-item *ngIf="loadingError; else noError">
      <ion-label>
        <ion-text color="danger">
          {{ loadingError }}
        </ion-text>
      </ion-label>
    </ion-item>

    <ng-template #noError>
      <ion-item-group>
        <!-- ** cifs ** -->
        <ion-item-divider>Network Folders</ion-item-divider>
        <ion-item>
          <ion-label>
            <h2>
              {{
                type === 'create'
                  ? 'Backup server to'
                  : 'Restore your services from'
              }}
              a folder on another computer that is connected to the same network
              as your Start9 server. View the
              <a
                href="https://docs.start9.com/0.3.5.x/user-manual/backups/backup-create#network-folder"
                target="_blank"
                noreferrer
                style="text-decoration: none"
              >
                Instructions
                <ion-icon name="open-outline" size="small"></ion-icon>
              </a>
            </h2>
          </ion-label>
        </ion-item>
        <!-- add new cifs -->
        <ion-item button detail="false" (click)="presentModalAddCifs()">
          <ion-icon
            slot="start"
            name="add"
            size="large"
            color="dark"
          ></ion-icon>
          <ion-label>
            <b>Open New</b>
          </ion-label>
        </ion-item>
        <!-- cifs list -->
        <ng-container *ngFor="let target of cifs; let i = index">
          <ion-item
            button
            *ngIf="target.entry as cifs"
            (click)="select(target)"
          >
            <ion-icon
              slot="start"
              name="folder-open-outline"
              size="large"
            ></ion-icon>
            <ion-label>
              <h1>{{ cifs.path.split('/').pop() }}</h1>
              <ng-container *ngIf="cifs.mountable">
                <backup-drives-status
                  [type]="type"
                  [hasValidBackup]="target.hasValidBackup"
                ></backup-drives-status>
              </ng-container>
              <h2 *ngIf="!cifs.mountable" class="inline">
                <ion-icon name="cellular-outline" color="danger"></ion-icon>
                Unable to connect
              </h2>
              <p>Hostname: {{ cifs.hostname }}</p>
              <p>Path: {{ cifs.path }}</p>
            </ion-label>
            <ion-note
              slot="end"
              class="click-area"
              (click)="presentActionCifs($event, target, i)"
            >
              <ion-icon name="ellipsis-horizontal"></ion-icon>
            </ion-note>
          </ion-item>
        </ng-container>

        <br />

        <!-- ** drives ** -->
        <ion-item-divider>Physical Drives</ion-item-divider>
        <!-- always -->
        <ion-item>
          <ion-label>
            <h2>
              {{
                type === 'create'
                  ? 'Backup server to'
                  : 'Restore your services from'
              }}
              a physical drive that is plugged directly into your Start9 Server.
              View the
              <a
                href="https://docs.start9.com/0.3.5.x/user-manual/backups/backup-create#physical-drive"
                target="_blank"
                noreferrer
                style="text-decoration: none"
              >
                Instructions
                <ion-icon name="open-outline" size="small"></ion-icon>
              </a>
              .
              <ion-text color="warning">
                Warning. Do not use this option if you are using a Raspberry Pi
                with an external SSD. The Raspberry Pi does not support more
                than one external drive without additional power and can cause
                data corruption.
              </ion-text>
            </h2>
          </ion-label>
        </ion-item>

        <!-- no drives -->
        <div
          *ngIf="!drives.length; else hasDrives"
          class="ion-padding-bottom ion-text-center"
        >
          <br />
          <p>
            No drives detected.
            <a style="cursor: pointer" (click)="refresh()">
              Refresh
              <ion-icon name="refresh"></ion-icon>
            </a>
          </p>
        </div>
        <!-- drives detected -->
        <ng-template #hasDrives>
          <ion-item
            button
            *ngFor="let target of drives"
            (click)="select(target)"
          >
            <ion-icon slot="start" name="save-outline" size="large"></ion-icon>
            <ng-container *ngIf="target.entry as drive">
              <ion-label>
                <h1>{{ drive.label || drive.logicalname }}</h1>
                <backup-drives-status
                  [type]="type"
                  [hasValidBackup]="target.hasValidBackup"
                ></backup-drives-status>
                <p>
                  {{ drive.vendor || 'Unknown Vendor' }} -
                  {{ drive.model || 'Unknown Model' }}
                </p>
                <p>Capacity: {{ drive.capacity | convertBytes }}</p>
              </ion-label>
            </ng-container>
          </ion-item>
        </ng-template>
      </ion-item-group>
    </ng-template>
  </ng-template>
</ion-content>
